import * as React from 'react';

export interface IProps{
  ID?:number
  文章名?:string
  发布内容?:string
  发布时间?:string
}
export interface States{
  title:string
  list:IProps[],
  wztit:string,
  wzctx:string
}
class App extends React.Component<IProps,States>{
  constructor(props:IProps){
    super(props);
    this.state ={
      title:"文章列表",
      list:[{ID:1,文章名:"文章名1",发布内容:"发布内容1"},{ID:2,文章名:"文章名2",发布内容:"发布内容2"}],
      wztit:"",
      wzctx:""
    }
    this.handleClick = this.handleClick.bind(this);
  }
  titleChange(event:any){
    this.setState({
      wztit:event.target.value
    })
  }
  ctxChange(event:any){
    this.setState({
      wzctx:event.target.value
    })
  }
  handleClick(){
     this.state.list.push({ID:this.state.list.length,文章名:this.state.wztit,发布内容:this.state.wzctx});
     this.setState({
       list:this.state.list,
       wztit:"",
       wzctx:""
     });
  }
  componentDidMount(){
    // 无法清空
      var tit:any =  this.refs.tit;
      var ctx:any =  this.refs.ctx;
      tit.setAttribute("value","");
      ctx.setAttribute("value","");
  }
  render() {
    const { title,list} = this.state;
    let btnstyle={border:"none",color:"#fff",background:"#ff6666",cursor:"pointer"}
    return (
      <div>
        <h3>{title}</h3>
        <ol>
          {list.map((v:IProps,i:number)=>
            <li key={i}>文章id-{v.ID}/{v.文章名}/{v.发布内容}</li>
          )}
          {/* <li>文章id-{this.props.ID}/{this.props.文章名}/{this.props.发布内容}</li> */}
        </ol>
        <label htmlFor="title">标题：</label>
        <input ref="tit" type="text" name="title" onChange={this.titleChange.bind(this)} />
        <label htmlFor="ctx">内容：</label>
        <input ref="ctx" type="text" name="ctx" onChange={this.ctxChange.bind(this)} />
        <button style={btnstyle} onClick={this.handleClick}>添加文章</button>
      </div>
    );
  }
}

export default App;

// export interface HelloProps { compiler: string; framework: string; }

// // 'HelloProps' describes the shape of props.
// // State is never set so we use the 'undefined' type.
// export class Hello extends React.Component<HelloProps, undefined> {
//     render() {
//         return <h1>Hello from {this.props.data.compiler} and {this.props.data.framework}!</h1>;
//     }
// }